<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <title>DataTable</title>
    <meta name="description" content="">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <script src="https://cdn.bootcss.com/jquery/3.3.1/jquery.js"></script>
    <link href="https://cdn.bootcss.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet">
    <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
    <link rel="stylesheet" type="text/css" href="https://cdn.datatables.net/1.10.16/css/jquery.dataTables.min.css">
    <script src="https://cdn.bootcss.com/datatables/1.10.16/js/jquery.dataTables.js"></script>
    <style>
        .content {
            margin: 50px auto;
            border: 1px solid #ccc;
        }

        .operation {
            margin: 10px;
        }

        .operation > button {
            margin: 10px;
        }

        #books_length {
            float: left;
            margin-left: 20px;
        }

        #books_filter {
            float: right;
            margin-right: 20px;
        }

        #books {
            margin: 5px;
        }

        .center-block {
            display: block;
            width: 21%;
            margin: auto;
        }
    </style>
</head>

<body>
<section class="content">
    <div class="btn-group operation">
        <button id="btn_add" type="button" class="btn bg-primary">
            <span class="glyphicon glyphicon-plus" aria-hidden="true"></span>新增
        </button>
        <button id="btn_edit" type="button" class="btn bg-info">
            <span class="glyphicon glyphicon-pencil" aria-hidden="true"></span>修改
        </button>
        <button id="btn_delete" type="button" class="btn btn-success">
            <span class="glyphicon glyphicon-remove" aria-hidden="true"></span>删除
        </button>
    </div>
    <div class="modal fade" id="addBook" role="dialog">
        <div class="modal-dialog">
            <div class="modal-content">
                <div class="modal-header">
                    <button type="button" class="close" data-dismiss="modal">&times;</button>
                    <h4 class="modal-title">添加漫画</h4>
                </div>
                <div id="addBookModal" class="modal-body">
                    <div class="form-horizontal">
                        <div class="form-group">
                            <label for="bookName" class="col-sm-2 control-label">漫画:*</label>
                            <div class="col-sm-10">
                                <input class="form-control" id="bookName" type="text">
                            </div>
                        </div>
                        <div class="form-group">
                            <label for="bookAuthor" class="col-sm-2 control-label">作者:*</label>
                            <div class="col-sm-10">
                                <input class="form-control" id="bookAuthor" type="text">
                            </div>
                        </div>
                        <div class="form-group">
                            <label for="bookPrice" class="col-sm-2 control-label">集数:*</label>
                            <div class="col-sm-10">
                                <input class="form-control" id="bookPrice" type="text">
                            </div>
                        </div>
                        <div class="form-group">
                            <label for="bookPublish" class="col-sm-2 control-label">出版社:*</label>
                            <div class="col-sm-10">
                                <input class="form-control" id="bookPublish" type="text">
                            </div>
                        </div>
                        <div class="form-group">
                            <label for="bookISBN" class="col-sm-2 control-label">ISBN:*</label>
                            <div class="col-sm-10">
                                <input class="form-control" id="bookISBN" type="text">
                            </div>
                        </div>
                    </div>
                </div>
                <div class="modal-footer">
                    <div class="center-block">
                        <button id="cancelAdd" type="button" class="btn btn-default" data-dismiss="modal">取消</button>
                        <button id="addBooksInfo" type="button" class="btn btn-success" data-dismiss="modal">保存</button>
                    </div>
                </div>
            </div>
        </div>
    </div>
    <div class="modal fade" id="editBookInfo" role="dialog">
        <div class="modal-dialog">
            <div class="modal-content">
                <div class="modal-header">
                    <button type="button" class="close" data-dismiss="modal">&times;</button>
                    <h4 class="modal-title">修改漫画内容</h4>
                </div>
                <div id="editBookModal" class="modal-body">
                    <div class="form-horizontal">
                        <div class="form-group">
                            <label for="editBookName" class="col-sm-2 control-label">漫画:*</label>
                            <div class="col-sm-10">
                                <input class="form-control" id="editBookName" type="text">
                            </div>
                        </div>
                        <div class="form-group">
                            <label for="editBookAuthor" class="col-sm-2 control-label">作者:*</label>
                            <div class="col-sm-10">
                                <input class="form-control" id="editBookAuthor" type="text">
                            </div>
                        </div>
                        <div class="form-group">
                            <label for="editBookPrice" class="col-sm-2 control-label">集数:*</label>
                            <div class="col-sm-10">
                                <input class="form-control" id="editBookPrice" type="text">
                            </div>
                        </div>
                        <div class="form-group">
                            <label for="editBookPublish" class="col-sm-2 control-label">出版社:*</label>
                            <div class="col-sm-10">
                                <input class="form-control" id="editBookPublish" type="text">
                            </div>
                        </div>
                        <div class="form-group">
                            <label for="editBookISBN" class="col-sm-2 control-label">ISBN:*</label>
                            <div class="col-sm-10">
                                <input class="form-control" id="editBookISBN" type="text">
                            </div>
                        </div>
                    </div>
                </div>
                <div class="modal-footer">
                    <div class="center-block">
                        <button id="cancelEdit" type="button" class="btn btn-default" data-dismiss="modal">取消</button>
                        <button id="saveEdit" type="button" class="btn btn-success" data-dismiss="modal">保存</button>
                    </div>
                </div>
            </div>
        </div>
    </div>
    <div class="modal fade" id="deleteBook" role="dialog">
        <div class="modal-dialog">
            <div class="modal-content">
                <div class="modal-header">
                    <button type="button" class="close" data-dismiss="modal">&times;</button>
                    <h4 class="modal-title">确认要删除吗？</h4>
                </div>
                <div class="modal-footer">
                    <button type="button" class="btn btn-default" data-dismiss="modal">取消</button>
                    <button id="delete" type="button" class="btn btn-danger" data-dismiss="modal">删除</button>
                </div>
            </div>
        </div>
    </div>

    <table id="books" class="table table-striped table-bordered row-border hover order-column" cellspacing="0"
           width="100%">
        <thead>
        <tr>
            <th>序号</th>
            <th>漫画</th>
            <th>作者</th>
            <th>集数</th>
            <th>出版社</th>
            <th>ISBN</th>
        </tr>
        </thead>
        <tbody></tbody>
    </table>
</section>
</body>
<script>
    var titles = ['漫画', '作者', '集数', '出版社', 'ISBN']
    $(function () {
        var table = $('#books').DataTable({
            {#data: data,#}
            "pagingType": "full_numbers",
            "bSort": true,
            ajax: {
                'url': 'tables_all',
                'type': 'Get',
            },
            columns: [
                {
                    data: null,
                },
                {
                    data: "fields.name",
                },
                {
                    data: "fields.author",
                },
                {
                    data: "fields.publish",
                },
                {
                    data: "fields.times",
                },
                {
                    data: "fields.ISBN",
                }
            ],
            "language": {
                "sProcessing": "处理中...",
                "sLengthMenu": "显示 _MENU_ 项结果",
                "sZeroRecords": "没有匹配结果",
                "sInfo": "显示第 _START_ 至 _END_ 项结果，共 _TOTAL_ 项",
                "sInfoEmpty": "显示第 0 至 0 项结果，共 0 项",
                "sInfoFiltered": "(由 _MAX_ 项结果过滤)",
                "sInfoPostFix": "",
                "sSearch": "搜索:",
                "sUrl": "",
                "sEmptyTable": "表中数据为空",
                "sLoadingRecords": "载入中...",
                "sInfoThousands": ",",
                "oPaginate": {
                    "sFirst": "首页",
                    "sPrevious": "上页",
                    "sNext": "下页",
                    "sLast": "末页"
                },
                "oAria": {
                    "sSortAscending": ": 以升序排列此列",
                    "sSortDescending": ": 以降序排列此列"
                }
            },
            "columnDefs": [{
                "searchable": false,
                "orderable": true,
                "targets": 0
            }],
            "order": [[1, 'asc']]
        });

        table.on('order.dt search.dt', function () {
            table.column(0, {
                search: 'applied',
                order: 'applied'
            }).nodes().each(function (cell, i) {
                cell.innerHTML = i + 1;
            });
        }).draw();
        $('#books tbody').on('click', 'tr', function () {
            if ($(this).hasClass('selected')) {
                $(this).removeClass('selected');
            } else {
                table.$('tr.selected').removeClass('selected');
                $(this).addClass('selected');
            }
        });
        $("#cancelAdd").on('click', function () {
            console.log('cancelAdd');
            $("#addBookModal").find('input').val('')
        })
        $("#addBooksInfo").on('click', function () {
            if ($("#addBookModal").find('input').val() !== '') {
                var bookName = $("#bookName").val()
                var bookAuthor = $("#bookAuthor").val()
                var bookPrice = $("#bookPrice").val()
                var bookPublish = $("#bookPublish").val()
                var bookISBN = $("#bookISBN").val()
                var addBookInfos = [].concat(bookName, bookAuthor, bookPrice, bookPublish, bookISBN);
                for (var i = 0; i < addBookInfos.length; i++) {
                    if (addBookInfos[i] === '') {
                        alert(titles[i] + '内容不能为空')
                    }
                }
                data = {
                    "fields": {
                        "name": bookName,
                        "author": bookAuthor,
                        "times": bookPrice,
                        "publish": bookPublish,
                        "ISBN": bookISBN,
                    }
                }

                $("#addBookModal").find('input').val('')

                // 更新数据库
                $.ajax({
                        type: 'POST',
                        url: "tables_add/",
                        data: data,
                        success: function (callback) {
                            data["pk"] = callback;
                            table.row.add(data).draw();
                        },
                    }
                );
            }
        })
        $("#addBooksInfo").click();
        $("#btn_add").click(function () {
            $("#addBook").modal()
        });
        $('#btn_edit').click(function () {
            if (table.rows('.selected').data().length) {
                $("#editBookInfo").modal()
                var rowData = table.rows('.selected').data()[0];
                var inputs = $("#editBookModal").find('input');
                var editvalue = [];
                editvalue.push(rowData.fields.name);
                editvalue.push(rowData.fields.author);
                editvalue.push(rowData.fields.publish);
                editvalue.push(rowData.fields.times);
                editvalue.push(rowData.fields.ISBN);

                for (var i = 0; i < inputs.length; i++) {
                    $(inputs[i]).val(editvalue[i])
                }
            } else {
                alert('请选择项目');
            }
        });
        $("#saveEdit").click(function () {
            var editBookName = $("#editBookName").val()
            var editBookAuthor = $("#editBookAuthor").val()
            var editBookPrice = $("#editBookPrice").val()
            var editBookPublish = $("#editBookPublish").val()
            var editBookISBN = $("#editBookISBN").val()
            var rowData = table.rows('.selected').data()[0];
            var newRowData = [].concat(editBookName, editBookAuthor, editBookPrice, editBookPublish, editBookISBN, pk);
            data = {
                "pk": rowData.pk,
                "fields": {
                    "name": editBookName,
                    "author": editBookAuthor,
                    "times": editBookPrice,
                    "publish": editBookPublish,
                    "ISBN": editBookISBN,
                }
            };
            // 更新数据库
            $.ajax({
                    type: 'POST',
                    url: "tables_edit/",
                    data: data,
                    success: function (callback) {
                        data["pk"] = callback;
                        var tds = Array.prototype.slice.call($('.selected td'))
                        for (var i = 0; i < newRowData.length; i++) {
                            if (newRowData[i] !== '') {
                                tds[i + 1].innerHTML = newRowData[i];
                            } else {
                                alert(titles[i] + '内容不能为空')
                            }
                        }
                    },
                }
            );

        })
        $("#cancelEdit").click(function () {
            console.log('cancelAdd');
            $("#editBookModal").find('input').val('')
        })
        $('#btn_delete').click(function () {
            if (table.rows('.selected').data().length) {
                $("#deleteBook").modal()
            } else {
                alert('请选择项目');
            }
        });
        $('#delete').click(function () {
            // 删除数据库
            var rowData = table.rows('.selected').data()[0];
            data = {
                "pk": rowData.pk,

            };
            $.ajax({
                    type: 'POST',
                    url: "tables_delete/",
                    data: data,
                    success: function (callback) {
                       table.row('.selected').remove().draw(false);
                    },
                }
            );

        });
    })
    $(document).ajaxSend(function (event, xhr, settings) {
        function getCookie(name) {
            var cookieValue = null;
            if (document.cookie && document.cookie != '') {
                var cookies = document.cookie.split(';');
                for (var i = 0; i < cookies.length; i++) {
                    var cookie = jQuery.trim(cookies[i]);
                    // Does this cookie string begin with the name we want?
                    if (cookie.substring(0, name.length + 1) == (name + '=')) {
                        cookieValue = decodeURIComponent(cookie.substring(name.length + 1));
                        break;
                    }
                }
            }
            return cookieValue;
        }

        function sameOrigin(url) {
            // url could be relative or scheme relative or absolute
            var host = document.location.host; // host + port
            var protocol = document.location.protocol;
            var sr_origin = '//' + host;
            var origin = protocol + sr_origin;
            // Allow absolute or scheme relative URLs to same origin
            return (url == origin || url.slice(0, origin.length + 1) == origin + '/') ||
                (url == sr_origin || url.slice(0, sr_origin.length + 1) == sr_origin + '/') ||
                // or any other URL that isn't scheme relative or absolute i.e relative.
                !(/^(\/\/|http:|https:).*/.test(url));
        }

        function safeMethod(method) {
            return (/^(GET|HEAD|OPTIONS|TRACE)$/.test(method));
        }

        if (!safeMethod(settings.type) && sameOrigin(settings.url)) {
            xhr.setRequestHeader("X-CSRFToken", getCookie('csrftoken'));
        }
    });
</script>

</html>
